<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body>div {
            margin: 10px auto; width: 700px; height: 300px; border: 1px solid black;
            padding: 10px; overflow: auto;
        }
        .content{ overflow-y: auto; word-wrap:anywhere }
    </style>
    <script src="/public/js/axios1.6.0.min.js" ></script>
</head>
<body>
    <div class="box1"><p>示例1，创建一个blob二进制对象，然后用户可以下载</p></div>
    <div class="box2">
        <p>示例2，用户上传图片后，展示图片</p> <input type="file" id="input" onchange="readFile()" multiple/>
        <div class="imgList"></div>
    </div>
    <div class="box3">
        <p>示例3，读取文件内容</p>
        <input type="file" id="input1" onchange="readFile1()" />
        <form action="" onchange="formonchange(event)">
            <span>请选择读取方式:</span>
            <select name="conent_type" >
                <option value="1">以readAsBinaryString二进制字符串读取</option>
                <option value="2">以readAsText文本字符串读取</option>
                <option value="3">以readAsDataURL基于base64编码的url地址读取</option>
                <option value="4">以readAsArrayBuffer对象读取</option>
            </select>
        </form>
        <div class="content">
        </div>
    </div>
    <div class="box4">
        <p>示例4，预览本地视频</p>
        <span>请选择要预览的视频：</span><input type="file" id="input1" onchange="playVideo(event)" />
        <video src="" class="player" height="200px" controls>视频播放标签</video>
        <!-- <audio class="audio_player" controls>音乐播放标签</audio> -->
    </div>
    <div class="box4">
        <p>示例5，上传文件到服务器</p>
        <span>请选择要上传的文件：</span>
        <div>
            <input type="file" id="file" onchange="" multiple />
            <input type="button" value="上传" id="submit" onclick="upload_file(event)" />
            <div class="imageList2"></div>
        </div>
    </div>
 
    
    <script>
        // 示例1，创建一个blob二进制对象，然后用户可以下载
        let blob = new Blob(["你好，见到你很高兴"]);
        let a = document.createElement("a");
        a.href = window.URL.createObjectURL(blob);
        a.download = "hello-world.txt";
        a.textContent = "下载 hello-world.txt";
        let box1 = document.querySelector('.box1')
        box1.appendChild(a);

        
        // 示例2，用户上传图片后，展示图片
        function readFile(){
            let el_imgList = document.querySelector('.imgList')
            let selected_file = document.getElementById('input').files;

            for(let i=0;i<selected_file.length;i++){
                let el_img = document.createElement("img");
                el_img.src = window.URL.createObjectURL(selected_file[i]);
                el_img.width = 100
                el_img.height = 100
                el_imgList.appendChild(el_img);
            }
        }


        // 示例3，读取文件内容
        let readWay = 0  // 读取文件内容的方式
        function formonchange(e){  // 用户更改读取方式时，出发函数
            readWay = e.target.value
            readFile1()
        }
        function readFile1(){  // 读取文件
            let el_content = document.querySelector('.content')
            let selected_file = document.getElementById('input1').files[0];
            let le_form = document.querySelector('select')
            let reader = new FileReader();
            reader.onload = function(e){
                let content = reader.result
                el_content.textContent = content
            }
            if(!selected_file){
                alert('请选择文件')
                return
            }
            switch (readWay){
                case '1':
                    reader.readAsBinaryString(selected_file);
                    break
                case '2':
                    console.log('ok');
                    reader.readAsText(selected_file);
                    break
                case '3':
                    reader.readAsDataURL(selected_file);
                    break
                case '4':
                    reader.readAsArrayBuffer(selected_file);
                    break
            }
        }
        
        
        // 示例3，预览本地视频，事实上 视频标签也可以播放音频
        function playVideo(e){
            let el = e.target.files[0];
            let video_url = window.URL.createObjectURL(el)
            let el_player = document.querySelector('.player')
            el_player.src = video_url

            // let el_audio_player = document.querySelector('.audio_player')
            // el_audio_player.src = video_url
            
        }


        // 示例4，上传文件到服务器，使用axios记得要引入
        axios.defaults.withCredentials=true;  // 允许请求携带cookie参数
        const http = axios.create({
            baseURL:'http://192.168.0.86:2233/api/',  // 设置基础路径
            // timeout:5000,  // 设置超时时间
        });
        // 获取csrftoken,django发送post请求时需要csrf认证
        async function get_csrftoken(){
            await http({
                url:'get_csrftoken/',
                method:'get'
            }).then(res=>{})
            let cookie_list = document.cookie.split(';')
            let csrf_token = ''
            cookie_list.forEach((item,index)=>{
                if(item.split('=')[0]=="csrftoken"){
                    csrf_token = item.split('=')[1]
                }
            })
            return csrf_token
        }
        // 请求拦截器，向服务器发送post，put，delete请求时自动获取 csrf_token
        http.interceptors.request.use(async (config)=>{
            // 请求拦截器，可以在这里面设置请求头等配置信息
            if(config.method=='POST' || config.method=='post' || config.method=='PUT' || config.method=='put'||
            config.method=='DELETE' || config.method=='delete'
            ){
                // 如果是post请求，则先获取csrftoken，django发送post请求需要验证请求头中的csrftoken
                let csrf_token= await get_csrftoken()
                config.headers["X-CSRFToken"]=csrf_token
            }
            return config
        })
        // 上传文件的方法
        async function upload_file(e){
            let el_imgList = document.querySelector('.imageList2')  // 获取用来展示图片的元素
            let el_form = document.querySelector('#file').files  // 获取用户选择的文件
            const formData = new FormData();  // 创建一个FormData对象，有些后端接收文件一般只能接收FormData格式
            for(let i=0;i<el_form.length;i++){
                formData.append('file', el_form[i]);  // 把文件添加进FormData里面
                // 如果用户上传的是图片，则在页面显示图片
                if(/image\/(png|jpeg|gif)/.test(el_form[i].type)){
                    showPic(el_imgList,el_form[i])
                }
            }
            // 发送post请求，上传文件，注意一定要加 'Content-Type': 'multipart/form-data' 请求头 
            http.post('trademark/file_upload/', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {
                // 保存图片地址
            })
            return true
        }
        // 用户选择图片后，在页面展示图片
        function showPic(el,file){
            let el_img = document.createElement("img");
            el_img.src = window.URL.createObjectURL(file);
            el_img.width = 100
            el_img.height = 100
            el.appendChild(el_img);
        }
            
        
    </script>
</body>
</html>